<template>
	<view class="top-box">体系</view>
	<view class="common-box my-system">
		<view class="z-font-32 text-w">我的教学体系</view>
		<view class="flex_sac">
			<navigator url="/pages/course/index?type=0" hover-class="none" class="item flex_cc">
				<view class="text-c">
					<view class="z-font-32 text-w">{{ headData[0] }}</view>
					<view class="flex_cc uni-mt-14">
						<image
							:src="setting.oss_pub_domain + '/app-img/system/course.png'"
							class="icon-size-32"
						></image>
						<view class="uni-color-grey uni-ml-4">课程</view>
					</view>
				</view>
			</navigator>
			<!-- <navigator url="/pages/course/index?type=1" hover-class="none" class="item flex_cc">
				<view class="text-c">
					<view class="z-font-32 text-w">{{ headData[1] }}</view>
					<view class="flex_cc uni-mt-14">
						<image :src="setting.oss_pub_domain + '/app-img/system/plan.png'" class="icon-size-32"></image>
						<view class="uni-color-grey uni-ml-4">计划</view>
					</view>
				</view>
			</navigator> -->
			<navigator url="/pages/course/index?type=1" hover-class="none" class="item flex_cc">
				<view class="text-c">
					<view class="z-font-32 text-w">{{ headData[2] }}</view>
					<view class="flex_cc uni-mt-14">
						<image
							:src="setting.oss_pub_domain + '/app-img/system/question.png'"
							class="icon-size-32"
						></image>
						<view class="uni-color-grey uni-ml-4">问题库</view>
					</view>
				</view>
			</navigator>
			<navigator url="/pages/course/index?type=2" hover-class="none" class="item flex_cc">
				<view class="text-c">
					<view class="z-font-32 text-w">{{ headData[3] }}</view>
					<view class="flex_cc uni-mt-14">
						<image
							:src="setting.oss_pub_domain + '/app-img/system/scheme.png'"
							class="icon-size-32"
						></image>
						<view class="uni-color-grey uni-ml-4">方案库</view>
					</view>
				</view>
			</navigator>
		</view>
	</view>
	<view class="common-box">
		<view class="flex_sbc">
			<view class="z-font-32 text-w">我的体系课</view>
			<view class="create-button" @click="editOpenCourse()">新建体系课</view>
		</view>
		<view class="z-font-24 uni-color-grey uni-mt-4">通过审核可推广给更多降杆学员</view>
		<view class="course-list">
			<view v-for="open in openList" :key="open.id">
				<view class="course-main flex_fsc">
					<image :src="setting.oss_pub_domain + open.material" mode="aspectFill" class="open-img"></image>
					<view class="width-100">
						<view>{{ open.name }}</view>
						<view class="flex_sbc uni-mt-12">
							<view class="z-font-24 uni-color-grey">
								关联方案：{{ open.relScheme ? open.relScheme.split(',').length - 1 : 0 }}个
							</view>
							<image
								:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
								class="icon-size-32"
								@click="editOpenCourse(open)"
							></image>
						</view>
					</view>
				</view>
				<view v-for="(course, cindex) in open.courseList" :key="course.id">
					<view v-if="cindex < 5 || open.ext" class="flex_fsc related-courses">
						<view class="dot"></view>
						<view class="uni-color-grey flex_sh">课程</view>
						<view class="uni-ml-24 u-line-1">{{ course.name }}</view>
					</view>
				</view>
				<view
					v-if="open.courseList && open.courseList.length && open.courseList.length > 5"
					class="uni-color-main-grey text-c"
					@click="open.ext = !open.ext"
				>
					{{ open.ext ? '收起' : '展开' }}
				</view>
			</view>
		</view>
		<navigator url="/pages/course/open-course/open-course" class="flex_cc uni-mt-40" hover-class="none">
			<view class="uni-color-main-grey">更多体系课</view>
			<image :src="setting.oss_pub_domain + '/app-img/icon/ext-81A290.png'" class="icon-size-32"></image>
		</navigator>
	</view>
	<view class="common-box analysis-teaching">
		<view class="z-font-32 text-w">教学分析</view>
		<view class="line"></view>
		<view class="uni-mt-36">
			<view class="flex_sbc">
				<view class="z-font-32">常用技能</view>
				<view class="flex_cc button">
					<uni-data-select v-model="analysisTime" :localdata="range" @change="changeSelect($event, 0)" :clear="false"></uni-data-select>
				</view>
			</view>
			<view class="z-font-24 uni-color-grey">常使用的解决方案</view>
			<l-echart ref="analysisChart" @finished="analysisInit"></l-echart>
		</view>
		<view class="line"></view>
		<view class="uni-mt-36">
			<view class="flex_sbc">
				<view class="z-font-32">擅长解决问题</view>
				<view class="flex_cc button">
					<uni-data-select v-model="questionTime" :localdata="range" @change="changeSelect($event, 1)" :clear="false"></uni-data-select>
				</view>
			</view>
			<l-echart ref="questionChart" @finished="questionInit"></l-echart>
		</view>
		<view class="line"></view>
		<view class="uni-mt-36">
			<view class="flex_sbc">
				<view class="z-font-32">学员人群分析</view>
				<view class="flex_cc button">
					<uni-data-select v-model="crowdTime" :localdata="range" @change="changeSelect($event, 2)" :clear="false"></uni-data-select>
				</view>
			</view>
			<l-echart ref="crowdChart" @finished="crowdInit"></l-echart>
		</view>
	</view>
	<view></view>
</template>

<script setup>
import { getOpenCourseList, countHeaderCourses } from '@/api/course';
import { getSystemCountData } from '@/api/index';
import * as echarts from 'echarts';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

// 体系课
const openList = ref([]),
	headData = ref([0, 0, 0, 0]);
function showFun() {
	getOpenList();
	countHeaderCourses().then((res) => {
		headData.value = res;
	});
}
defineExpose({ showFun });

function getOpenList() {
	getOpenCourseList({ pageSize: 3, pageNum: 1 }).then((res) => {
		openList.value = res.rows;
	});
}

//  编辑体系课
function editOpenCourse(item) {
	uni.setStorageSync('open-course', item);
	uni.navigateTo({
		url: '/pages/course/open-course/edit/edit',
		events: {
			editDone: (data) => {
				that.tools.alert('编辑完成');
				that.$forceUpdate();
			}
		}
	});
}

const range = [
	{ value: 1, text: '全部' },
	{ value: 2, text: '半年内' },
	{ value: 3, text: '一年内' }
];

function changeSelect(e, type) {
	const funList = [analysisInit, questionInit, crowdInit]
	funList[type](e)
}

const analysisOption = {
	tooltip: {
		trigger: 'item'
	},
	series: [
		{
			name: '常用技能分析',
			type: 'pie',
			radius: ['50%', '60%'],
			data: [
				{
					value: 1048,
					name: '推杆1'
				},
				{
					value: 735,
					name: '推杆2'
				},
				{
					value: 580,
					name: '推杆3'
				},
				{
					value: 484,
					name: '推杆4'
				},
				{
					value: 300,
					name: '推杆5'
				}
			],
			itemStyle: {
				borderRadius: 20
			},
			label: {
				alignTo: 'edge',
				formatter: '{liang|{c}}\n{name|{b}}',
				minMargin: 5,
				edgeDistance: 10,
				lineHeight: 15,
				rich: {
					name: {
						color: '#999'
					}
				}
			},
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}
	]
};
const analysisChart = ref(''), analysisTime = ref(1);
let analysisChartObj = '';
async function analysisInit(time = 1) {
	if (!analysisChartObj) analysisChartObj = await analysisChart.value.init(echarts);
	getSystemCountData(1, time).then((res) => {
		analysisOption.series[0].data = res.map((item) => {
			return {
				value: item.counts,
				name: item.title
			};
		});
		analysisChartObj.setOption(analysisOption);
	});
}

const questionOption = {
	color: '#FF816D',
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: [
		{
			type: 'category',
			data: ['1号木', '打不远', '打不中', '铁杆', '左曲球'],
			axisTick: {
				alignWithLabel: true
			}
		}
	],
	yAxis: [
		{
			type: 'value'
		}
	],
	series: [
		{
			name: '数据',
			type: 'bar',
			barWidth: '30%',
			data: [10, 52, 200, 334, 390],
			itemStyle: {
				borderRadius: [20, 20, 0, 0]
			},
			barWidth: 10
		}
	]
};
const questionChart = ref(''), questionTime = ref(1);
let questionChartObj = ''
async function questionInit(time = 1) {
	if (!questionChartObj) questionChartObj = await questionChart.value.init(echarts);
	getSystemCountData(2, time).then(res => {
		questionOption.series[0].data = res.map(item => item.counts);
		questionOption.xAxis[0].data = res.map(item => item.title);
		questionChartObj.setOption(questionOption);
	});
}

const crowdOption = {
	color: ['#7AE8E1', '#1B4BD6'],
	series: [
		{
			name: '访问来源',
			type: 'pie',
			radius: '50%',
			data: [
				{
					value: 1048,
					name: '男士'
				},
				{
					value: 735,
					name: '女士'
				}
			],

			label: {
				alignTo: 'edge',
				formatter: '{liang|{c}}\n{name|{b}}',
				minMargin: 5,
				edgeDistance: 10,
				lineHeight: 15,
				rich: {
					name: {
						color: '#999'
					}
				}
			}
		}
	]
};
const crowdChart = ref(''), crowdTime = ref(1);
let crowdChartObj = ''
async function crowdInit(time = 1) {
	if (!crowdChartObj) crowdChartObj = await crowdChart.value.init(echarts);
	getSystemCountData(3, time).then((res) => {
		crowdOption.series[0].data = res.map((item) => {
			return {
				value: item.counts,
				name: item.title
			};
		});
		crowdChartObj.setOption(crowdOption);
	});
}
</script>

<style lang="scss">
@import 'index.scss';
</style>
